<template>
  <div class="container">
    <h1 class="topTitle">多边形</h1>
    <div style="height: 600px; width: 100%">
      <l-map class="map" ref="map" :options="mapOptions" @ready="doSomethingOnReady()">

        <l-tile-layer :url="mapOptions.url"></l-tile-layer>
        <l-polygon :lat-lngs="polygon.latlngs" :color="polygon.color"></l-polygon>
        <l-control-zoom position="topleft" zoom-in-title="放大" zoom-out-title="缩小"></l-control-zoom>
      </l-map>
    </div>
  </div>
</template>

<script>

  /**http://geojson.io/**/
  export default {
  name: "PolygonPage",
  components: {
  },
  data() {
    return {
      map:null,
      //地图参数
      mapOptions:{
        attributionControl :false,
        zoomControl:false,
        minZoom: 2,
        maxZoom: 14,
        zoom: 6,
        center: {'lon':116.404,'lat':39.915},
        preferCanvas: true,
        url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        attribution:  '&copy; WebGis',
      },
      polygon: {
        latlngs:
        [
          [41.17581145133952,111.29150390625001],[40.47750881660339,109.918212890625],[39.88998230025583,109.48974609375001],[39.05891670982973,109.18212890625001],[38.364541105578155,109.81933593750001],[38.2093206667613,110.09399414062501],[38.062418984248794,110.31372070312501],[38.09701068653703,110.90698242187501],[37.68952589794135,110.77514648437501],[37.3147483552236,109.96215820312501],[37.00831024540572,110.44555664062501],[37.04339459460034,111.36840820312501],[37.19232220149862,111.97265625000001],[37.3060102287506,112.34619140625001],[37.46314104528327,113.34594726562501],[38.148867552344306,113.34594726562501],[38.63108634101471,113.65356445312501],[38.93083779148202,113.96118164062501],[38.442026793198224,114.69726562500001],[38.053768502070696,115.10375976562501],[38.63108634101471,116.20239257812501],[39.577379503349874,115.19165039062501],[40.17598784025767,114.70825195312501],[40.85251402653679,114.224853515625],[41.46459835971372,113.63159179687501],[40.80263518905784,112.68676757812501],[40.29340604211217,112.39013671875001],
        ],
        color: 'green'
      },
    }
  },
  methods: {
    doSomethingOnReady() {
      this.map = this.$refs.map.mapObject
    },
  },
}
</script>

<style lang="stylus" scoped>
.container
  width: 100%
  h1.topTitle
    text-align: center
</style>